<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D和3D效果</title>
		<style type="text/css">
			#d1{
				width: 150px;
				height: 80px;
				background-color: orange;
				position:relative;
				left: 100px;
				top: 100px;
				transition: all 3s; 
			}
			#d1:hover{
				/* 位移 */
				/* transform: translate(500px,100px); */
				/* 旋转 */
				/* transform: rotate(360deg); */
				/* 缩放 */
				/* transform: scale(1.5,3); */
				/* 倾斜 */
				/* transform: skew(-45deg); */
				/* 变化的属性不超过两种 */
				/* transform: translate(500px,500px) rotate(720deg); */
				/* transform: scale(3) translate(500px,500px) rotate(720deg) ; */
				/* 如果想实现很多种变化 推荐使用变化矩阵*/
				transform: matrix(3,0,0,3,100,200);
			}
			#d2{
				position:relative;
				left: 100px;
				top: 100px;
				width: 300px;
				height: 300px;
				border: 1px solid red;
				margin: 50px;
				/* 内部出现3D变化 */
				transform-style: preserve-3d;
				/* 设置3D的视距 */
				perspective: 500px;
				/* 视距的源点 */
				/* perspective-origin: 0% 100%; */
				
				padding: 50px;
			}
			#dd2{
				width: 200px;
				height: 180px;
				background-color: orangered;
				/* 3D变换的源点 */
				transform-origin: right;
				transition: all 3s; 
			}
			#dd2:hover{
				transform: rotateY(90deg);
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			<div id="dd2">
				
			</div>
		</div>
	</body>
</html>